<template>
  <div class="gatewayinfo">
    <!--网关信息 gatewayInfo-->
    <div class="con">
         <el-scrollbar style="height:100%;width: 100%;">
         <div class="mytitle">
             <span></span>基本信息
         </div>
         <div class="mytable">
              <div class="items">
                 <div class="leftitem">产品名称</div>
                 <div class="rightitem" v-show="!basicInfo.product_name.edit">{{basicInfo.product_name.value}} 
                  <el-icon  @click="openInput(basicInfo.product_name)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.product_name.edit"> <el-input ref="myInput" v-model="basicInfo.product_name.value" @blur='blurfn(basicInfo.product_name)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">电源</div>
                 <div class="rightitem" v-show="!basicInfo.power.edit">{{basicInfo.power.value}} 
                  <el-icon  @click="openInput(basicInfo.power)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.power.edit"> <el-input ref="myInput" v-model="basicInfo.power.value" @blur='blurfn(basicInfo.power)'/></div>

              </div>
              <div class="items">
                 <div class="leftitem">所属项目</div>
                  <div class="rightitem" v-show="!basicInfo.power_consumption.edit">{{basicInfo.power_consumption.value}} 
                  <el-icon  @click="openInput(basicInfo.power_consumption)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.power_consumption.edit"> <el-input ref="myInput" v-model="basicInfo.power_consumption.value" @blur='blurfn(basicInfo.power_consumption)'/></div>

              </div>
              <div class="items">
                 <div class="leftitem">功率</div>
                  <div class="rightitem" v-show="!basicInfo.project.edit">{{basicInfo.project.value}} 
                  <el-icon  @click="openInput(basicInfo.project)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.project.edit"> <el-input ref="myInput" v-model="basicInfo.project.value" @blur='blurfn(basicInfo.project)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">颜色</div>

                 <div class="rightitem" v-show="!basicInfo.color.edit">{{basicInfo.color.value}} 
                  <el-icon  @click="openInput(basicInfo.color)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.color.edit"> <el-input ref="myInput" v-model="basicInfo.color.value" @blur='blurfn(basicInfo.color)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">工作温度</div>


                 <div class="rightitem" v-show="!basicInfo.operating_temperature.edit">{{basicInfo.operating_temperature.value}} 
                  <el-icon  @click="openInput(basicInfo.operating_temperature)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.operating_temperature.edit"> <el-input ref="myInput" v-model="basicInfo.operating_temperature.value" @blur='blurfn(basicInfo.operating_temperature)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">规格</div>

                 <div class="rightitem" v-show="!basicInfo.specification.edit">{{basicInfo.specification.value}} 
                  <el-icon  @click="openInput(basicInfo.specification)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.specification.edit"> <el-input ref="myInput" v-model="basicInfo.specification.value" @blur='blurfn(basicInfo.specification)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">工作湿度</div>

                 <div class="rightitem" v-show="!basicInfo.operating_humidity.edit">{{basicInfo.operating_humidity.value}} 
                  <el-icon  @click="openInput(basicInfo.operating_humidity)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.operating_humidity.edit"> <el-input ref="myInput" v-model="basicInfo.operating_humidity.value" @blur='blurfn(basicInfo.operating_humidity)'/></div>
              </div>
         </div>
         <div class="mytitle">
             <span></span>配置信息
         </div>
         <div class="mytable">
              <div class="items">
                 <div class="leftitem">兼容协议</div>

                 <div class="rightitem" v-show="!basicInfo.protocol.edit">{{basicInfo.protocol.value}} 
                  <el-icon  @click="openInput(basicInfo.protocol)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.protocol.edit"> <el-input ref="myInput" v-model="basicInfo.protocol.value" @blur='blurfn(basicInfo.protocol)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">4G网络</div>

                 <div class="rightitem" v-show="!basicInfo.wangluo.edit">{{basicInfo.wangluo.value}} 
                  <el-icon  @click="openInput(basicInfo.wangluo)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.wangluo.edit"> <el-input ref="myInput" v-model="basicInfo.wangluo.value" @blur='blurfn(basicInfo.wangluo)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">串口</div>

                 <div class="rightitem" v-show="!basicInfo.chuangkou.edit">{{basicInfo.chuangkou.value}} 
                  <el-icon  @click="openInput(basicInfo.chuangkou)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.chuangkou.edit"> <el-input ref="myInput" v-model="basicInfo.chuangkou.value" @blur='blurfn(basicInfo.chuangkou)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">B码对时</div>

                 <div class="rightitem" v-show="!basicInfo.Bmaduishi.edit">{{basicInfo.Bmaduishi.value}} 
                  <el-icon  @click="openInput(basicInfo.Bmaduishi)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.Bmaduishi.edit"> <el-input ref="myInput" v-model="basicInfo.Bmaduishi.value" @blur='blurfn(basicInfo.Bmaduishi)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">网口</div>

                 <div class="rightitem" v-show="!basicInfo.wangkou.edit">{{basicInfo.wangkou.value}} 
                  <el-icon  @click="openInput(basicInfo.wangkou)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.wangkou.edit"> <el-input ref="myInput" v-model="basicInfo.wangkou.value" @blur='blurfn(basicInfo.wangkou)'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">开关量</div>

                 <div class="rightitem" v-show="!basicInfo.kaiguanliang.edit">{{basicInfo.kaiguanliang.value}} 
                  <el-icon  @click="openInput(basicInfo.kaiguanliang)"><EditPen /></el-icon>
                  </div>
                 <div class="rightitem" v-show="basicInfo.kaiguanliang.edit"> <el-input ref="myInput" v-model="basicInfo.kaiguanliang.value" @blur='blurfn(basicInfo.kaiguanliang)'/></div>
              </div>
             
         </div>
         <div class="mytitle">
             <span></span>运行信息
         </div>
          <div class="mytable">
              <div class="items">
                 <div class="leftitem">运行状态</div>
                 <div class="rightitem">{{run_status}}</div>
              </div>
              <div class="items">
                 <div class="leftitem">CPU</div>
                 <div class="rightitem">{{cpu_usage}}%</div>
              </div>
              
              <div class="items">
                 <div class="leftitem">授权状态</div>
                 <div class="rightitem" v-show="auth_status == 1" style="color:green">授权成功</div>
                 <div class="rightitem" v-show="auth_status != 1" style="color:red">授权失败/未授权</div>
              </div>
              <div class="items">
                 <div class="leftitem">内存</div>
                 <div class="rightitem">{{memory_usage}}%</div>
              </div>

              <div class="items">
                 <div class="leftitem">APP运行时间</div>
                 <div class="rightitem">{{uptime}}</div>
              </div>
              <div class="items">
                 <div class="leftitem">存储</div>
                 <div class="rightitem">{{basicInfo.storage.value}}</div>
              </div>
          
             
         </div>
         <!-- <div class="mytitle">
             <span></span>系统运行信息
         </div>
          <div class="mytable">
              <div class="items">
                 <div class="leftitem">CPU</div>
                 <div class="rightitem">{{cpu_usage}}%</div>
              </div>
              <div class="items">
                 <div class="leftitem">内存</div>
                 <div class="rightitem">{{memory_usage}}%</div>
              </div>
            
             
             
         </div> -->
         
          </el-scrollbar>
           <div class="el-loading-mask" v-show="isMask">
             <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
          </div>
    </div>
   
  </div>
</template>

<script>
import {authconfigauth_status,getSystemMetrics,getInformation,editInformation} from "../../api/dataComparisonApi";
import { onBeforeUnmount , ref} from "vue";
export default {
  setup() {
    const uptimess = ref(null);
    
    onBeforeUnmount(() => {
      clearInterval(uptimess.value)
      
    });
    return {
     uptimess,
    };
   },

  data() {
    return {
       xinghao:"GD2123572",
       xiangmu:"项目1",
       shebeiID:"LKD-4556211",
       xinghaoFlag:false,
       xiangmuFlag:false,
       shebeiIDFlag:false,

       isMask:false,
      basicInfo:{
         //产品名称
         product_name:{
            value:"",
            edit:false
         },
         //电源
         power:{
            value:"",
            edit:false
         },
         //所属项目
         project:{
            value:"",
            edit:false
         },
         //功率
         power_consumption:{
            value:"",
            edit:false
         },
         //颜色
         color:{
            value:"",
            edit:false
         },
         //工作温度
         operating_temperature:{
            value:"",
            edit:false
         },
         //工作湿度
         operating_humidity:{
            value:"",
            edit:false
         },
         //规格
         specification:{
            value:"",
            edit:false
         },
         //兼容协议
         protocol:{
            value:"",
            edit:false
         },
         
         //4G网络
         wangluo:{
            value:"",
            edit:false
         },
         //串口
         chuangkou:{
            value:"",
            edit:false
         },
         //B码对时
         Bmaduishi:{
            value:"",
            edit:false
         },
         //网口
         wangkou:{
            value:"",
            edit:false
         },
         //开关量
         kaiguanliang:{
            value:"",
            edit:false
         },
         //存储
         storage:{
            value:"",
            edit:false
         },
         
      },

      auth_status:"0",//授权状态
      cpu_usage:"",// CPU使用率
      memory_usage:"",// 内存使用率
      app_status:"",// APP状态
      run_status:"",// 运行状态
      uptime:"",// 运行时间
      myid:""
    };
  },

  mounted() {
     this.getinfo()
     this.getauth_status()
     this.getList()
     this.uptimess = setInterval(() => {
         this.getList()
     },5000)
  },

  methods: {
    openInput(row){
      //   console.log("获取焦点",row);
        row.edit = true
     },
     blurfn(row){
      //   console.log("失去焦点",row);
        row.edit = false
        this.editinfofn()
     },
     //查询授权码状态
     getauth_status(){
        authconfigauth_status().then(res => {
         //   console.log("授权码状态",res);
           if(res && res.auth_status){
              this.auth_status = res.auth_status
           }
        })
     },
     getList(){
       getSystemMetrics().then(res => {
         //   console.log("查询",res);
           if(res && res.cpu_usage){
              this.cpu_usage = res.cpu_usage
              this.memory_usage = res.memory_usage
              this.app_status = res.app_status
              this.run_status = res.run_status
              this.uptime = res.uptime
           }
       })
     },
     getinfo(){
      this.isMask = true
       getInformation().then(res => {
         this.isMask = false
          if(res != undefined && Object.prototype.toString.call(res) === '[object Object]'){
             this.myid =res.id
             this.basicInfo= {
                  //产品名称
                  product_name:{
                     value:res.basic.product_name,
                     edit:false
                  },
                  //电源
                  power:{
                     value:res.basic.power,
                     edit:false
                  },
                  //所属项目
                  power_consumption:{
                     value:res.basic.power_consumption,
                     edit:false
                  },
                  //功率
                  project:{
                     value:res.basic.project,
                     edit:false
                  },
                  //颜色
                  color:{
                     value:res.basic.color,
                     edit:false
                  },
                  //工作温度
                  operating_temperature:{
                     value:res.basic.operating_temperature,
                     edit:false
                  },
                  //工作湿度
                  operating_humidity:{
                     value:res.basic.operating_humidity,
                     edit:false
                  },
                  //规格
                  specification:{
                     value:res.basic.dimensions,
                     edit:false
                  },
                  //兼容协议
                  protocol:{
                     value:res.config.supported_protocols,
                     edit:false
                  },
                  
                  //4G网络
                  wangluo:{
                     value:res.config.cellular_network,
                     edit:false
                  },
                  //串口
                  chuangkou:{
                     value:res.config.serial_ports,
                     edit:false
                  },
                  //B码对时
                  Bmaduishi:{
                     value:res.config.time_synchronization,
                     edit:false
                  },
                  //网口
                  wangkou:{
                     value:res.config.network_ports,
                     edit:false
                  },
                  //开关量
                  kaiguanliang:{
                     value:res.config.digital_io,
                     edit:false
                  },
                  storage:{
                     value:res.system.storage,
                     edit:false
                  },
               }
          }
       })
     },
     //修改基本信息
     editinfofn(){
       var dd = {
         "id":this.myid,
         "color": this.basicInfo.color.value,
         "dimensions": this.basicInfo.specification.value,
         "operating_humidity": this.basicInfo.operating_humidity.value,
         "operating_temperature": this.basicInfo.operating_temperature.value,
         "power": this.basicInfo.power.value,
         "power_consumption": this.basicInfo.power_consumption.value,
         "product_name": this.basicInfo.product_name.value,
         "project": this.basicInfo.project.value,
         "cellular_network": this.basicInfo.wangluo.value,
         "digital_io": this.basicInfo.kaiguanliang.value,
         "network_ports": this.basicInfo.wangkou.value,
         "serial_ports": this.basicInfo.chuangkou.value,
         "supported_protocols":this.basicInfo.protocol.value,
         "time_synchronization": this.basicInfo.Bmaduishi.value
      }
     
       editInformation(dd).then(res => {
           if(res.code == 200){
             this.getinfo()
             this.$message({showClose: true,message: '操作成功',type: 'success'});
           }else {
              this.$message.error('操作失败')
           }
       })
     }
  },
};
</script>
<style lang="scss" scoped>
    .gatewayinfo {
         width: 100%;
         height: 100%;
         .con {
             width: 100%;
             height: 100%;
             background-color: #fff;
             padding: 12px;
             box-sizing: border-box;
             position: relative;
             .mytitle {
                 width: 100%;
                 height: 36px;
                 background-color: #F0F5FF;
                 border-radius: 4px;
                 display: flex;
                 align-items: center;
                 color: #000;
               //   font-weight: bold;
                 font-size: 15px;
                 span {
                     display: inline-block;
                     width: 3px;
                     height: 18px;
                     background-color: #2178F1;
                     margin-left: 12px;
                     margin-right: 6px;
                     border-radius: 3px;
                 }
             }
             .mytable {
                 width: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 margin-top: 12px;
                 margin-bottom: 20px;
                 .items {
                     width: 50%;
                     height: 48px;
                     display: flex;
                     border: 1px solid #E6E6E6;
                     box-sizing: border-box;
                     .leftitem {
                         width: 180px;
                         height: 100%;
                         background-color: #F5F5F5;
                         border-right: 1px solid #E6E6E6;
                         display: flex;
                         align-items: center;
                         font-size: 14px;
                         color: #1A1A1A;
                         padding-left: 12px;
                         box-sizing: border-box;
                     }
                     .rightitem {
                         width: calc(100% - 180px);
                         height: 100%;
                         display: flex;
                         align-items: center;
                         font-size: 14px;
                         color: #1A1A1A;
                         padding:0px 12px;
                         box-sizing: border-box;
                         i {
                            font-size: 16px;
                            margin-left: 10px;
                            color: #2178F1;
                            cursor: pointer;
                         }
                     }
                 }
             }
         }
    }
</style>